<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>进度条</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            进度条
                        </div>
                        <div class="panel-body">
                            <p>基础样式</p>
                            <p>
                            <div class="progress">
                                <div style="width:45%" class="progress-bar"></div>
                            </div>
                            <div class="progress">
                                <div style="width:55%" class="progress-bar"></div>
                            </div>
                            </p>
                            <p>颜色样式</p>
                            <p>
                            <div class="progress ">
                                <div style="width:45%" class="progress-bar "></div>
                            </div>
                            <div class="progress">
                                <div style="width:55%" class="progress-bar progress-bar-success"></div>
                            </div>
                            <div class="progress">
                                <div style="width:65%" class="progress-bar progress-bar-info"></div>
                            </div>
                            <div class="progress">
                                <div style="width:75%" class="progress-bar progress-bar-warning"></div>
                            </div>
                            <div class="progress">
                                <div style="width:85%" class="progress-bar progress-bar-danger"></div>
                            </div>
                            </p>
                            <p>带内容进度条</p>
                            <p>
                            <div class="progress">
                                <div style="width:65%" class="progress-bar progress-bar-info">65%</div>
                            </div>
                            <div class="progress">
                                <div style="width:75%" class="progress-bar progress-bar-warning">75/100</div>
                            </div>
                            <div class="progress">
                                <div style="width:85%" class="progress-bar progress-bar-danger">85/100</div>
                            </div>
                            </p>
                            <p>进度条尺寸</p>
                            <p>
                            <div class="progress progress-xs">
                                <div style="width:45%" class="progress-bar "></div>
                            </div>
                            <div class="progress progress-sm">
                                <div style="width:55%" class="progress-bar progress-bar-success"></div>
                            </div>
                            <div class="progress">
                                <div style="width:65%" class="progress-bar progress-bar-info"></div>
                            </div>
                            <div class="progress progress-lg">
                                <div style="width:75%" class="progress-bar progress-bar-warning"></div>
                            </div>
                            </p>
                            <p>动态条纹</p>
                            <p>
                            <div class="progress progress-xs progress-striped active">
                                <div style="width:45%" class="progress-bar "></div>
                            </div>
                            <div class="progress progress-sm progress-striped active">
                                <div style="width:55%" class="progress-bar progress-bar-success"></div>
                            </div>
                            <div class="progress progress-striped active">
                                <div style="width:65%" class="progress-bar progress-bar-info"></div>
                            </div>
                            </p>
                            <p>动态条纹</p>
                            <p>
                            <div class="progress progress-xs progress-striped active">
                                <div style="width:45%" class="progress-bar "></div>
                            </div>
                            <div class="progress progress-sm progress-striped active">
                                <div style="width:55%" class="progress-bar progress-bar-success"></div>
                            </div>
                            <div class="progress progress-striped active">
                                <div style="width:65%" class="progress-bar progress-bar-info"></div>
                            </div>
                            </p>
                            </p>
                            <p>堆叠效果</p>
                            <p>
                            <div class="progress">
                                <div style="width:35%" class="progress-bar ">35%</div>
                                <div style="width:25%" class="progress-bar progress-bar-success">25%</div>
                                <div style="width:25%" class="progress-bar progress-bar-warning">25%</div>
                            </div>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
</body>

</html>